import React from 'react'
import {getHistory, uuid} from "../../../util/uitls";
import style from './style.css'

class FriendListItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {visible: props.visible,};
    };


    componentWillReceiveProps(nextProps) {
    }


    onClose() {
        this.props.onClose()
    }

    try_to_talk() {
        this.props.setStore("app.activeTalkUser", this.props.user)
        getHistory().push(`/talk/${ this.props.user.id}`)
    }

    render() {
        var user = this.props.user
        return <section className={style.body}>
            <div style={{
                width: "20px",
                display: "flex",
                alignItems: "center",
            }}>
                {user.index}
            </div>
            <div className={style.left}>
                <img src={user.avatar_url} alt=""/>
            </div>
            <div className={style.center}>
                <div className={style.row1}>
                    <span>{user.name}</span>&nbsp;&nbsp;
                    <span>距离你：{user.distance}m</span>
                </div>
                <div className={style.row2}>
                    {user.description}
                </div>
            </div>
            <div className={style.right}>
                <div className={style.button} onClick={this.try_to_talk.bind(this)}>聊天</div>
            </div>
        </section>
    }
}

FriendListItem.defaultProps = {
    popup: false,
    visible: false,
    onClose() {
    },
    user: {
        avatar_url: "https://unsplash.it/500/300?image=810",
        city: "anju8y0sny5",
        distance: 56,
        gender: 1,
        id: 2.778927068276108,
        latitude: 4.701879912203443,
        longitude: 2.097588914962058,
        mobile: "xc3j5qw4fh",
        name: "8sha30m3pfs",
        nick_name: "516ux60orlo",
        password: "vdidf9km7zf",
        province: "ufv5dhyvzd",
    }
}
export default FriendListItem